<template>
  <view class="page">
    <image v-if="prodInfo.coverPicture" style="height: 400rpx;width: 100vw;" :src="prodInfo.coverPicture[0]?.filePath"
      mode="aspectFill"></image>
    <view class="detail">
      <h2 class="title">{{prodInfo.title}}</h2>
      <view class="tag_color">
        <view class="tag-item" v-for="tagItem in prodInfo.tagList" :key="tagItem.id">{{tagItem.tagName}}</view>
        <view class="color-item" v-for="colorItem in prodInfo.colorList" :key="colorItem.id"
          :style="{background:colorItem.color}"></view>
      </view>
      <view class="temp_detail">
        <view class="t-d-item" v-if="prodInfo.lastUsedTime">
          <text class="iconfont icon-shijian"></text>
          <text>{{prodInfo.lastUsedTime}}</text>
        </view>
        <view class="t-d-item" v-if="prodInfo.lastUsedPlace">
          <text class="iconfont icon-jiudian"></text>
          <text>{{prodInfo.lastUsedPlace}}</text>
        </view>
        <view class="t-d-item">
          <text class="iconfont icon-banquan"></text>
          <text>{{baseInfo.businessName}}</text>
        </view>
      </view>
      <view class="pic-list">
        <h2 style="font-size: 34rpx;font-weight: bold;">预览</h2>
        <!--        <view class="iconfont icon-liebiao" :class="{'icon-active':prodType==='liebiao'}"
          @click="changeProdType('liebiao')" />
        <view class="iconfont icon-qiapianxingshi" :class="{'icon-active':prodType==='kapian'}"
          @click="changeProdType('kapian')"></view> -->
      </view>
    </view>
    <!-- <view class="pic" :class="prodType"> -->
    <view class="pic">
      <view v-for="imgItem in prodPiclist" :key="imgItem.id" @longtap="handleLongTap(imgItem)" class="prod-item">
        <video :src="imgItem.filePath" style="width: 100%;" v-if="imgItem.filePath.includes('.mp4')" controls></video>
        <image :src="imgItem.filePath" mode="widthFix" v-else />
        <view v-if="imgItem.praiseStatus" class="collect" @click.stop="handleCancelPraiseStatus(imgItem)">
        </view>
      </view>
    </view>
    <fixed-info ref="fixedInfoRef" class-type="light" :works-id="worksId" :share-url="`/pages/works/detail?id=${worksId}`" />
    <view class="fixed-tips" v-show="tipsShow">tips:登录状态下长按单个视频/图片，可以标记喜欢哦~</view>
  </view>
</template>

<script setup>
  import {
    onLoad,
    onReady
  } from '@dcloudio/uni-app'
  import {
    ref,
    computed
  } from 'vue'
  import {
    getWorksDetailByIdApi
  } from '@/api/works.js'
  import {
    cancelPariseApi,
    doPariseApi
  } from '@/api/praise.js'
  import {
    useStore
  } from 'vuex'
  import {
    doPariseFunc,
    executePariseActionSheet
  } from '@/utils/index.js'
  const worksId = ref('')
  const store = useStore()
  onLoad((options) => {
    if (options) {
      worksId.value = options.id
      getDetailInfo(options.id)
    }
  })
  const tipsShow = ref(true)
  onReady(() => {
    handleGetPraise()
    setTimeout(() => {
      tipsShow.value = false
    }, 3000)
  })
  const prodType = ref('liebiao')
  const changeProdType = (type) => {
    prodType.value = type
  }
  // 判断是否获取点赞数据
  const fixedInfoRef = ref()
  const handleGetPraise = () => {
    fixedInfoRef.value?.setPraise()
  }
  const handleCancelPraiseStatus = (imgItem) => {
    const params = {
      userOpenId: uni.getStorageSync('openid'),
      relationId: imgItem.id,
      likesType: imgItem.filePath.includes('.mp4') ? '视频' : '图集'
    }
    // 执行取消点赞
    doPariseFunc(1, params, () => {
      imgItem.praiseStatus = imgItem.praiseStatus ? 0 : 1
      store.dispatch('setUserCollectInfo')
    })
  }
  const handleLongTap = (item) => {
    const openid = uni.getStorageSync('openid')
    if (!openid) return false
    const params = {
      userOpenId: openid,
      relationId: item.id,
      likesType: item.filePath.includes('.mp4') ? '视频' : '图集'
    }
    executePariseActionSheet(item.praiseStatus, params, () => {
      item.praiseStatus = item.praiseStatus ? 0 : 1
      store.dispatch('setUserCollectInfo')
    })
  }
  const baseInfo = computed(() => {
    return store?.getters?.getBusinessInfo?.baseInfoBo ?? {}
  })
  const prodInfo = ref({})
  const prodPiclist = ref([])
  const getDetailInfo = async (id) => {
    try {
      const {
        code,
        data
      } = await getWorksDetailByIdApi({
        prodId: id,
        openId: uni.getStorageSync('openid') ?? ''
      })
      if (code === '000000') {
        prodInfo.value = data?.prodInfo ?? {}
        prodPiclist.value = data?.prodPiclistBos ?? []
      }
    } catch (e) {
      console.log(e)
    }
  }
</script>

<style lang="scss" scoped>
  .pic-list {
    width: 100%;
    display: flex;
    align-items: center;

    .iconfont {
      display: block;
      color: #C3C3C3;

      &:first-child {
        margin-left: auto;
      }
    }

    .icon-active {
      color: #333;
    }
  }

  .fixed-tips {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: 24rpx;
    position: fixed;
    padding: 6rpx 40rpx;
    bottom: 100rpx;
    left: 50%;
    border-radius: 24rpx;
    white-space: nowrap;
    transform: translate(-50%);
    transition: 1s;
  }

  view,
  text {
    background-color: transparent;
  }

  .detail {
    padding: 30rpx;

    .title {
      padding: 20rpx 0;
      font-size: 44rpx;
    }
  }

  .tag_color {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10rpx;

    .tag-item {
      color: #fff;
      padding: 10rpx 20rpx;
      font-size: 24rpx;
      background-color: #222;
    }

    .color-item {
      width: 28rpx;
      height: 28rpx;
      border: 1px solid #eee;
      border-radius: 50%;
    }
  }

  .temp_detail {
    margin: 30rpx 0;
    padding: 30rpx 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;

    .t-d-item {
      display: flex;
      align-items: center;
      gap: 20rpx;
      line-height: 60rpx;

      text {
        color: #666;

        &:last-child {
          font-size: 30rpx;

        }
      }
    }
  }

  .pic {
    padding-bottom: 80rpx;

    image {
      width: 100%;
    }

    .prod-item {
      position: relative;
    }
  }

  .pic.kapian {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10rpx;

    .prod-item {
      width: calc(50% - 5rpx);
    }
  }
</style>
